<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组非变异方法</title>
</head>

<body>
  <script>
    // 数组的非变异方法 --- 不改变原数组,返回一个新的数组

    // filter() //过滤数组中某些元素，返回符合条件的元素组成的新数组
    // concat() //合并两个或两个以上的数组，可以链式调用，返回合并后的数组　
    // slice() //切割数组中某一段元素，返回一个切割出来的数组
    // map() //使用map方法会产生一个新的数组，数组的每一项就是我们return出去的值（所以map方法必须有返回值，如果没有return，那么新数组的每一项都为undefined），数组的个数与原数组一样
    // some()   //会遍历数组中的每个元素，让每个值都执行一遍callback函数,如果有一个元素满足条件，返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。
    // forEach() //遍历数组
    // every() //检测数组所有元素是否满足条件

    let arr = [1, 2, 5, 4, 6, 9, 22, 12 , 5]
    console.log(arr)

    // filter() //过滤数组中某些元素，返回符合条件的元素组成的新数组
    // let arr1 = arr.filter(
    //   function(v){
    //     return v > 10
    //   }
    // )

    let arr1 = arr.filter(v => v < 10)
    console.log(arr1)

    let arr2 = arr.concat(arr, arr)
    console.log(arr2)

    // arr.slice(起始的下标位置，结束的下标位置)  --- 包头不包尾
    // arr.slice(起始的下标位置)  --- 起始下标位置到结束
    let arr3 = arr.slice(1, 5)
    console.log(arr3)

    // map() //使用map方法会产生一个新的数组，数组的每一项就是我们return出去的值（所以map方法必须有返回值，如果没有return，那么新数组的每一项都为undefined），数组的个数与原数组一样
    let arr4 = arr.map(v => v + 1)
    console.log(arr4)

    // some()   //会遍历数组中的每个元素，让每个值都执行一遍callback函数,如果有一个元素满足条件，返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。
    let res1 = arr.some(v => v >= 20)
    console.log(res1)
    let res2 = arr.some(v => v >= 30)
    console.log(res2)

    // every() //检测数组所有元素是否满足条件
    let res3 = arr.every(v => v >= 20)
    console.log(res3)
    let res4 = arr.every(v => v >= 1)
    console.log(res4)

    arr.forEach((v,i)=>{
      console.log(v + '+' + '索引' + i )
    })

    // arr.forEach(function (item, key, arr) {
    //   console.log(item, key, arr);
    // })

    // 返回一个字符串，默认以,分割
    //可以传入参数
    
    // let str  = arr.join()
    let str  = arr.join('+')
    console.log(str)

    // 转换成字符串，类似于没有参数的join()。
    // 该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。
    console.log(arr.toString())



    // 功能：根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1。
    // 该方法是查询方法，不会对数组产生改变。
    // 参数：indexOf(value, start);value为要查询的数据；start为可选，
    // 表示开始查询的位置，当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1
    console.log(arr.indexOf(55))
    console.log(arr.indexOf(6))


    // 查询数组中的数据，若没有就返回 -1 。 若有就返回最后一次出现的角标、
    console.log(arr.lastIndexOf(5))

    // reduce() 归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduce返回
    
    //demo5：使用reduce计算数组中所有数据的和
    // var arr = [10,20,30,40,50];
    var sum = arr.reduce(function(prev,now,index,self){
        return prev + now;
    },1)
    console.log(sum)

    // 参数：reduce()接收一个或两个参数：第一个是回调函数，表示在数组的每一项上调用的函数；
    // 第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。
    // reduce(callback,initial);callback默认有四个参数，分别为prev，now，index，self。
    // callback返回的任何值都会作为下一次执行的第一个参数。
    // 如果initial参数被省略，那么第一次迭代发生在数组的第二项上，因此callback的第一个参数是数组的第一项，
    // 第二个参数就是数组的第二项。



    // includes() 查询并返回布尔值
    console.log(arr.includes(5))
    console.log(arr.includes(55))
  </script>
</body>

</html>